﻿/// <reference path="../../js/jquery-3.1.0.min.js" />
/// <reference path="../../js/public.js" />

$$(document).ready(function () {
    $$.initPagingLoader({
        pageSize: 5,
        containerSelector: "#xyh-project-content",
        listSelector: "#xyh-project-list-ul",
        loadData: ajaxLoadPageData,
        render: appendItems,
        renderEmpty: function (jqList, jqContainer) { $.toast("暂无数据！"); }
    });
});

//获取页数据（一个测试实现）
function ajaxLoadPageData(args) {
    var pageIndex = args.pageIndex;
    var pageSize = args.pageSize;
    var ar = args.ar;
    var eventType = args.eventType;

    console.dir(args);

    //ar.fail() 失败时调用
    //ar.done(data) 成功时调用，data:null 表示无数据

    console.log("加载页：" + pageIndex);

    //参数
    var postData = {
        pageIndex: pageIndex,
        pageSize: pageSize
    };

    //返回值数据结构
    var data = {
        totalRecordCount: 20,
        records: [{
            id: 1,
            title: "信用行金融信用购01期",
            rate: "8.00",
            amount: "20.00万",
            period: "1个月",
            progress: 0,
            isEnd: false
        }]
    };

    //模拟 ajax 过程
    setTimeout(function () {
        data.records = [];
        for (var i = 0; i < pageSize; i++) {
            var id = pageIndex * pageSize + i;

            data.records[i] = {
                id: id,
                title: "信用行金融信用购第" + id + "期",
                rate: "8.00",
                amount: "20.00万",
                period: "1个月",
                progress: Math.min(100, id),
                isEnd: (id % 3 == 0 ? true : false)
            };
        }
        ar.done(data);
    }, 1000);
}

//动态新增条目
function appendItems(data, jqList, jqContainer) {
    var record, html, item;
    for (var i = 0; i < data.records.length; i++) {
        record = data.records[i];
        html = ""
                + "<li>"
                    + "<a class=\"external xyh-project-item\" href=\"detail.html?id=" + record.id + "\">"
                        + "<div class=\"project-title\">" + record.title + "</div>"
                        + "<div class=\"row no-gutter project-content\">"
                            + "<div class=\"col-33\"><div class=\"rate\">" + record.rate + "<span>%</span></div></div>"
                            + "<div class=\"col-25\"><div class=\"amount\"><label>产品规模</label><span>" + record.amount + "</span></div></div>"
                            + "<div class=\"col-25\"><div class=\"period\"><label>理财周期</label><span>" + record.period + "</span></div></div>"
                            + "<div class=\"col-17\"><div class=\"progress\"><div class=\"circle\"><div class=\"pie_left\"><div class=\"left\"></div></div><div class=\"pie_right\"><div class=\"right\"></div></div><div class=\"mask\">" + (record.isEnd ? "<b>告罄</b>" : "<span>" + record.progress + "</span>%") + "</div></div></div></div>"
                        + "</div>"
                    + "</a>"
                + "</li>";
        item = $$(html);
        item.appendTo(jqList);

        if (!record.isEnd) {
            setItemProgress(item.find(".progress"));
        }
    }
}

//显示项目进度
function setItemProgress(progress) {
    var progress_num = progress.find("span").text() * 3.6;
    if (progress_num <= 180) {
        progress.find(".right").css("transform", "rotate(" + progress_num + "deg)");
    } else {
        progress.find(".right").css("transform", "rotate(180deg)");
        progress.find(".left").css("transform", "rotate(" + (progress_num - 180) + "deg)");
    };
}